<template>
	<view>
		<view class="bgFff radius50 mb20" v-for="(item,index) in dataArray" :key="index" @click="openUrl('/foodpages/food/detail?id='+item.id)">
			<view class="img-box">
				<!-- swiper class="swiper" circular indicator-dots autoplay :interval="3000" indicator-active-color="#FFDE6D">
					<swiper-item v-for="(img,i) in item.imgs" :key="i">
						<image :src="api_host + img" mode="widthFix" class="width100 swiper-img"></image>
					</swiper-item>
				</swiper> -->
				<image :src="api_host + item.icon" mode="aspectFill" class="width100"></image>
			</view>
			<view class="p30">
				<view class="flex-jus">
					<text class="bold c343">{{item.title}}</text>
					<view class="vip textR pore">
						<image src="../../foodpages/static/images/food/vip.png" mode="heightFix"></image>
						<view class="cfff f24 year">{{item.badge}}</view>
					</view>
				</view>
				<u-gap height="5"></u-gap>
				<view class="flex-jus">
					<view class="flex">
						<text class="f24 c666">{{item.feature}}</text>
						<text class="f24 cyellow ml20">¥{{item.priceTag}}<!-- /人 --></text>
					</view>
					<view class="f24 c666" v-if="show_location">{{item.distance}}km</view>
				</view>
				<u-gap height="20"></u-gap>
				<view class="f26 c343">“{{item.intro}}”</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	export default {
		name: '',
		props: {
			dataArray: {
				type: Array,
				default: []
			},
			show_location: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				banList1: []
			}
		},
		onLoad(option) {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.img-box{
		max-height: 350rpx;
		overflow: hidden;
		image{
			max-height: 600rpx;
		}
	}
	.swiper{
		height: 400rpx;
		.swiper-img{
			max-height: 400rpx;
		}
	}
	.vip{
		image{
			height: 50rpx;
		}
		.year{
			position: absolute;
			right:10rpx;
			top: 0;
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
		}
	}
</style>